let imDirCtrl = document.getElementById('imDirCtrl');
let userCoords = document.getElementById('userCoords');
let coordsPicker = document.getElementById('coordsPicker');
let rwDemoCoords = document.getElementById('rwDemoCoords');
let rwDemoRead = document.getElementById('rwDemoRead');
let rwDemoWrite = document.getElementById('rwDemoWrite');
let imGnys;//功能演示
let imZbxz;//坐标选择
let im_rwDemoRead;//读写演示-读
let im_rwDemoWrite;//读写演示-写

window.onload = function () {
    //初始化图像标记
    let cwGnys = document.querySelector('#imDir > iframe').contentWindow;
    cwGnys.initImageMarking({
        //imageUrl: 'img/ChinaMapViaSynthetic.png',
        imageUrl: 'test/img/100x50.png',
        //imageUrl: '../test/img/WeChat Screenshot_20230512141600.png',
        //imageUrl: '../test/img/400x200.png',
        backgroundUrl: 'img/bg3.png',
        markerImgIcon: {
            mark: 'img/marker-32-ff0000.png',//标记时
            fixed: 'img/marker-32-ff0000.png',//固定时
            hover: 'img/marker-32-23c08c.png',//悬停时
            active: 'img/marker-32-1296db.png'//激活时
        },
        closeViaBtn: true,
        zoomStep: 1,
        //zoomLevel: 0.5,
        zoomInThreshold: 4,
        //zoomOutThreshold: 0.1,
        isCenterInfo: true,
        //allowZoom: false,
        //allowDrag: false,
        //allowMenu: false,
        //allowRemove: false,
        showCoefficient: false,
        //showAnimation: false,
        showCursorPointer: true,
        rippling: false,
        tipHtml: document.getElementById('tipHtml0').innerHTML,
        tipStyle: 'infoUserStyleForGnys',
        hoverFlag: false,
        whenReady: (imObj)=> {
            imGnys = imObj;
            let coords = [{x: -5, y: -21}, {x: 35, y: -13}, {x: 83, y: 19}];
            imObj.setCoords(coords);
        },
        whenChange: (mode)=> {
            imDirCtrl.innerHTML = '';
            let coords = imGnys.getCoords();
            for (let i = 0; i < coords.length; i++) {
                let c = coords[i];
                let item = dce('p');
                setAttr(item, 'index', i);
                item.textContent = i + ' (' + c.x + ', ' + c.y + ')';
                item.onclick = protrudeMe;
                imDirCtrl.appendChild(item);
            }
            if (mode == 'APPEND') {
                imDirCtrl.scrollTop = imDirCtrl.scrollTopMax;
            }
        },
        whenClick: (marker)=> {
            log('whenClick', marker);
        },
        whenHidden: (marker)=> {
            log('whenHidden', marker);
        }
    });

    let cwZbxz = document.querySelector('#coordsPicker > div > iframe').contentWindow;
    cwZbxz.initImageMarking({
        coordsType: 'STRING',
        whenReady: (imObj)=> {
            imZbxz = imObj;
        }
    });

    let theOptionList = document.querySelectorAll('.iCheck[name="theOption"]');
    for (let i = 0; i < theOptionList.length; i++) {
        theOptionList[i].onclick = function () {
            toggleClass(this, 'checked');
        };
    }

    let maxCoordsSizeList = document.querySelectorAll('.iRadio[name="maxCoordsSize"]');
    for (let i = 0; i < maxCoordsSizeList.length; i++) {
        maxCoordsSizeList[i].onclick = function () {
            for (let i = 0; i < maxCoordsSizeList.length; i++) {
                removeClass(maxCoordsSizeList[i], 'checked');
            }
            addClass(this, 'checked');
        };
    }

    let cw_rwDemoRead = document.querySelector('#rwDemoRead > div > iframe').contentWindow;
    cw_rwDemoRead.initImageMarking({
        coordsType: 'STRING',
        imageUrl: 'test/img/plan_01.jpg',
        allowMark: false,
        allowRemove: false,
        whenReady: (imObj)=> {
            im_rwDemoRead = imObj;
            ae(window, dom_obj_event.resize, function () {
                //自适应屏幕尺寸
                setDimension(document.querySelector('#rwDemoRead > div'), {
                    width: document.documentElement.clientWidth - 2,
                    height: document.documentElement.clientHeight - 2
                });
                //自动居中
                im_rwDemoRead.alignCenter();
            });
        },
        whenChange: (mode)=> {
            //log('mode', mode);
        }
    });

    let cw_rwDemoWrite = document.querySelector('#rwDemoWrite > div > iframe').contentWindow;
    cw_rwDemoWrite.initImageMarking({
        coordsType: 'STRING',
        imageUrl: 'test/img/plan_01.jpg',
        markerImgIcon: {
            mark: 'img/marker-32-ff0000.png',//标记时
            fixed: 'img/marker-32-ff0000.png',//固定时
            hover: 'img/marker-32-23c08c.png',//悬停时
            active: 'img/marker-32-1296db.png'//激活时
        },
        showAnimation: false,
        whenReady: (imObj)=> {
            im_rwDemoWrite = imObj;
            ae(window, dom_obj_event.resize, function () {
                //自适应屏幕尺寸
                setDimension(document.querySelector('#rwDemoWrite > div'), {
                    width: document.documentElement.clientWidth - 2,
                    height: document.documentElement.clientHeight - 2
                });
                //自动居中
                im_rwDemoWrite.alignCenter();
            });
        },
        whenChange: (mode)=> {
            if (im_rwDemoWrite.getCoordsType() == 'OBJECT') {
                rwDemoCoords.value = JSON.stringify(imZbxz.getCoords());
            } else {
                rwDemoCoords.value = im_rwDemoWrite.getCoords();
            }
        }
    });
};

function openCoordsPicker() {
    if (!hasClass(coordsPicker, 'shown')) {
        addClass(coordsPicker, 'shown');
        let coords;
        if (imZbxz.getCoordsType() == 'OBJECT') {
            coords = [];
            if (userCoords.value != '') {
                coords = JSON.parse(userCoords.value);
            }
        } else {
            coords = userCoords.value;
        }
        let ljbjOption = document.querySelector('.iCheck[name="theOption"][value="ljbj"]');
        imZbxz.pickCoords(getMaxCoordsSize(), coords, hasClass(ljbjOption, 'checked'));
        imZbxz.alignCenter();
        //跳转到第一个坐标
        imZbxz.gotoCoords(0);
    }
}

function getMaxCoordsSize() {
    return getAttr(document.querySelector('.iRadio[name="maxCoordsSize"].checked'), 'value');
}

function closeCoordsPicker() {
    //重置模式
    imZbxz.switchToDragMode();
    //关闭面板
    removeClass(coordsPicker, 'shown');
}

function updateUserCoords() {
    closeCoordsPicker();
    if (imZbxz.getCoordsType() == 'OBJECT') {
        userCoords.value = JSON.stringify(imZbxz.getCoords());
    } else {
        userCoords.value = imZbxz.getCoords();
    }
}

let activeIndex;
function protrudeMe() {
    let index = Number(getAttr(this, 'index'));
    imGnys.gotoCoords(index);
    let other = document.querySelector('#imDirCtrl > p.active');
    if (other != undefined) {
        removeClass(other, 'active');
    }
    addClass(this, 'active');
    activeIndex = index;
}

function clearCoords() {
    imGnys.clearCoords();
}

function removeCoords() {
    if (!imGnys.hasCoords(activeIndex)) {
        alert('请先跳转坐标！');
        return;
    }
    imGnys.removeCoords(activeIndex);
    activeIndex = undefined;//重置
}

function alignCenter() {
    imGnys.alignCenter();
}

function switchBadges() {
    if (!imGnys.hasCoords(activeIndex)) {
        alert('请先跳转坐标！');
        return;
    }
    let coords = imGnys.findCoords(activeIndex);
    let marker = imGnys.findMarker(coords.x, coords.y);
    let badges = marker.querySelector('.badges');
    badges.textContent = String(Number(badges.textContent) + 1);
    toggleClass(badges, 'shown');
}

function open_rwDemoRead() {
    if (!hasClass(rwDemoRead, 'shown')) {
        addClass(rwDemoRead, 'shown');
        de(window, dom_obj_event.resize);//触发自适应函数
        let coords;
        if (im_rwDemoRead.getCoordsType() == 'OBJECT') {
            coords = [];
            if (rwDemoCoords.value != '') {
                coords = JSON.parse(rwDemoCoords.value);
            }
        } else {
            coords = rwDemoCoords.value;
        }
        im_rwDemoRead.pickCoords(-1, coords);
        im_rwDemoRead.alignCenter();
        //跳转到第一个坐标
        im_rwDemoRead.gotoCoords(im_rwDemoRead.getSize() - 1);
    }
}

function close_rwDemoRead() {
    //重置模式
    im_rwDemoRead.switchToDragMode();
    //关闭面板
    removeClass(rwDemoRead, 'shown');
}

function open_rwDemoWrite() {
    if (!hasClass(rwDemoWrite, 'shown')) {
        addClass(rwDemoWrite, 'shown');
        de(window, dom_obj_event.resize);//触发自适应函数
        let coords;
        if (im_rwDemoWrite.getCoordsType() == 'OBJECT') {
            coords = [];
            if (rwDemoCoords.value != '') {
                coords = JSON.parse(rwDemoCoords.value);
            }
        } else {
            coords = rwDemoCoords.value;
        }
        im_rwDemoWrite.pickCoords(-1, coords, true);
        im_rwDemoWrite.alignCenter();
        //跳转到第一个坐标
        im_rwDemoWrite.gotoCoords(im_rwDemoWrite.getSize() - 1);
    }
}

function close_rwDemoWrite() {
    //重置模式
    im_rwDemoWrite.switchToDragMode();
    //关闭面板
    removeClass(rwDemoWrite, 'shown');
}